<template>
  <div class="recommend">
      <h2 class="title">商品推荐</h2>
    
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide class="swiperList" v-for="item of recommend" :key="item.goodsId">
          <router-link :to="{path:'/details',query:{id:item.goodsId}}">
        <van-image lazy-load :src="$filterImage(item.image)" />
        <p class="p1">{{item.goodsName}}</p>
        <p class="p1">{{item.price | toFixed | rmb}} ({{item.mallPrice | toFixed | rmb}})</p></router-link>
      </swiper-slide>

      
    </swiper>
    <!-- <ul class="goods">
          <li v-for="item of recommend" :key="item.goodsId">
              <van-image :src="$filterImage(item.image)" lazy-load></van-image>
              <p>{{item.goodsName}}</p>
              <p>{{"￥"+item.price+"("+"￥"+item.mallPrice+")"}}</p>
          </li>
    </ul>-->
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      recommend: [],
      swiperOption: {
        slidesPerView: 4,
        spaceBetween: 0,
        // pagination: {
        //   el: ".swiper-pagination",
        //   clickable: true
        // }
      }
    };
  },
  created() {
    this.$eventBus.$on("getIndexInfo", res => {
      this.recommend = res.recommend;
    });
  }
};
</script>

<style lang="scss">

    @import "@/style/home/recommend"
//  .goods {overflow-x: auto;white-space: nowrap;overflow-y: hidden;width:100%}
//   .goods li {display:inline-block; width: 33%; background: #ffffff;}或者用百float:left
//     .goods li p{white-space:normal;text-align:center;}
</style>